<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买快递回收</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>




		<el-row style="margin-top: 20px;">
			<el-form :inline="true">
				<el-form-item label="状态">
					<el-radio-group @input="zhungtaigaibain" v-model="radio1">
						<el-radio-button :label="1">全部商品</el-radio-button>
						<el-radio-button :label="2">上架中</el-radio-button>
						<el-radio-button :label="3">已上架</el-radio-button>
						< </el-radio-group>

				</el-form-item>

				<el-form-item label="商品名称">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.goodsName"
						placeholder="请输入商品名称"></el-input>
				</el-form-item>

				<el-form-item label="所属门店">
					<el-input clearable @clear="querymendianList" v-model="queryInfo.shopName"
						placeholder="请输入门店"></el-input>
				</el-form-item>


				<el-form-item label="发布时间">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataValue" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="querymendianList">搜索</el-button>

				</el-form-item>




			</el-form>
		</el-row>




		<!-- 表格区域 -->
		<el-table stripe :data="shopList" boder style="width: 100%">
			<el-table-column prop="goodsId
" label="商品ID">
			</el-table-column>
			<el-table-column prop="goodsName" label="商品">
			</el-table-column>
			<el-table-column prop="goodsShopName" label="所属门店">
			</el-table-column>
			<el-table-column prop="goodsCartCount" label="销量">
			</el-table-column>

			<el-table-column prop="goodsPresentPrice" label="预估价">
			</el-table-column>
			<el-table-column prop="addTime" label="发布时间">
			</el-table-column>
			<el-table-column prop="goodsStatus" label="状态">
				<template slot-scope="scope">
					<span v-if="(scope.row.goodsStatus==1)">已上架</span>
					<span v-if="(scope.row.goodsStatus==0)">已下架</span>
				</template>
			</el-table-column>

			<el-table-column label="操作">

				<template slot-scope="scope">
					<el-link v-if="(scope.row.goodsStatus==1)" type="success" @click="xiajia(scope.row)">立即下架</el-link>
					<el-link v-if="(scope.row.goodsStatus==0)" type="success" @click="xiajia(scope.row)">立即上架</el-link>
				</template>
			</el-table-column>
		</el-table>



		<!-- 页码分页 -->
		<!-- current-page要访问的页码，page-sizes每页展示的条数，page-size -->
		<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
			:current-page="queryInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
			:total="total">
		</el-pagination>


	</div>
</template>

<script>
	import city from '../assets/citydata.js'
	export default {
		// 数据
		data() {
			return {

				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					goodsName: '',
					goodsStatus: '',
					shopName: '',
					startTime: '',
					endTime: '',
				},

				shangxiajia: '下架',
				shangxiajiaxingshi: 'primary',
				httpma: '',
				dataValue: '',
				total: 1,
				shopList: [],
				title: '添加',
				dialogFormVisible: false,
				formLabelWidth: '120px',
				shopaddxinxi: {
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: "",
					courierStationDistrict: "",
					courierStationImage: "",
					courierStationName: "",
					courierStationProvince: "",
				},
				addressarr: [],
				cityy: city,
				radio1: '',



			}
		},




		// 方法
		methods: {
			zhungtaigaibain() {
				if (this.radio1 == 1) {
					this.querymendianList()
				}
				if (this.radio1 == 2) {
					this.$http.get('goods/querySearchShopGoodsList', {
						params: {

							goodsStatus: 1,


						}
					}).then((resp) => {
						if (resp.data.status == 200) {
							this.shopList = resp.data.data.list
							this.total = resp.data.data.total
						} else {
							this.$message.error('数据获取异常')
						}
					})




				}
				if (this.radio1 == 3) {
					this.$http.get('goods/querySearchShopGoodsList', {
						params: {

							goodsStatus: 0,


						}
					}).then((resp) => {
						if (resp.data.status == 200) {
							this.shopList = resp.data.data.list
							this.total = resp.data.data.total
						} else {
							this.$message.error('数据获取异常')
						}
					})



				}





			},




			xiajia(e) {
				if (e.goodsStatus == 1) {
					e.goodsStatus = 0

				} else {
					e.goodsStatus = 1


				}
				this.$http.post('goods/modifyShopGoods', {
					goodsId: e.goodsId,
					goodsStatus: e.goodsStatus

				}).then((resp) => {

					this.$message.success('正确')
				})
			},






			// 每页显示数量发生改变时触发
			handleSizeChange(val) {
				// 更改请求参数中的pageSize
				this.queryInfo.pageSize = val
				// 设置当改变后默认访问第一页
				this.queryInfo.pageNum = 1
				// 重新查询数据
				this.querymendianList()
			},



			// 页码发生改变时触发
			handleCurrentChange(num) {
				this.queryInfo.pageNum = num
				// 重新查询数据
				this.querymendianList()
			},

			// 查询数据方法
			querymendianList() {
				this.$http.get('goods/querySearchShopGoodsList', {
					params: this.queryInfo
				}).then((resp) => {
					if (resp.data.status == 200) {
						this.shopList = resp.data.data.list
						this.total = resp.data.data.total
					} else {
						this.$message.error('数据获取异常')
					}
				})
			},




		},




		//开始的钩子函数 
		mounted() {
			this.querymendianList()




		},




		// 监听器
		watch: {
			dataValue(newValue, oldValue) {
				this.queryInfo.startTime = newValue[0]
				this.queryInfo.endTime = newValue[1]
			},


			// 当身份信息改变时，进行赋值
			// addressarr() {
			// 	this.shopaddxinxi.courierStationProvince = this.addressarr[0]
			// 	this.shopaddxinxi.courierStationCity = this.addressarr[1]
			// 	this.shopaddxinxi.courierStationDistrict = this.addressarr[2]
			// }

		},




	}
</script>

<style>

</style>